﻿<template>
  <baseUI :isShow="myConfig.isShow" :label="myConfig.label" :showLabel="myConfig.showLabel" :labelSpan="myConfig.labelSpan" :isRequired="myConfig.isRequired" :showErrMsg="showErrMsg" :errMsg="errMsg" :commonConfig="commonConfig">
    <span :class="(myConfig.isEnable ? 'span-show' : 'span-show-disabled') + (myConfig.other.isMulti ? ' multi':'')" :style="myConfig.myStyle">
      <template>
        <div class="div-text">
          <template>
            {{showText}}
          </template>
        </div>
      </template>
      <span @click="handleEdit" class="span-button">
        <i :class="myConfig.isEnable?'el-icon-search':'el-icon-view'"></i>
      </span>
    </span>
    <el-dialog v-drag
        :closeOnClickModal="false"
        :visible.sync="showPop"
        append-to-body
        width="50%"
        class="pop"
        :before-close="handleShowPopClose">
      <el-form>
        <el-form-item>
          <el-button type="primary" @click="submitSelected" v-if="myConfig.isEnable">确定</el-button>
          <el-button type="info" @click="cancelSelected" v-if="myConfig.isEnable">取消</el-button>
        </el-form-item>
        <div>
          <el-row style = 'margin-bottom: 5px;' :gutter = '20'>
            <el-col :span = '5' v-if = "!isDisabled">
              <span>左键点击地图开始绘制,点击右键完成绘制</span>
            </el-col>
            <el-col :span = '4'>
              <el-input v-model = 'drawArea' placeholder = '请输入需要展示的行政区、市或省名称' :disabled = '!myConfig.isEnable'>
                <el-button v-if = "myConfig.isEnable" slot = "append" type = 'primary' @click = 'drawBounds'>绘制区域</el-button>
              </el-input>
            </el-col>
            <el-col :span = '2' class = 'el-input-group__prepend_row'>
              <el-input :disabled = "!myConfig.isEnable" v-model = 'drawRoadCity' placeholder = '道路所属城市'></el-input>
            </el-col>
            <el-col :span = '4' class = 'el-input-group__prepend_row'>
              <el-input v-model = 'drawRoad' placeholder = '请输入道路名称' :disabled = '!myConfig.isEnable'>
                <el-button v-if = "myConfig.isEnable" slot = "append" @click = 'drawRoadMethod'>绘制道路</el-button>
              </el-input>
            </el-col>
            <el-col :span = '6' class = 'el-input-group__prepend_row'>
              <el-input v-model = 'drawRoadEnd' placeholder = '请输入道路终点' :disabled = '!myConfig.isEnable'>
                <el-input slot = "prepend" :disabled = "!myConfig.isEnable" v-model = 'drawRoadStart' placeholder = '请输入道路起点'></el-input>
                <el-button v-if = "myConfig.isEnable" slot = "append" @click = 'drawRoadMethodStart'>绘制道路</el-button>
              </el-input>
            </el-col>
          </el-row>
          <div id = 'myMap_Gis'></div>
        </div>
      </el-form>
    </el-dialog>
  </baseUI>
</template>
<script>
import baseComponent from '../baseComponent.vue'
import baseUI from '../baseUI.vue'
export default {
  components: {
    baseComponent, baseUI
  },
  mixins: [baseComponent],
  mounted () {
    this.init(this.config)
    this.geocoder = new AMap.Geocoder({
      radius: 1000
    })
    this.setValue(this.selectedValue)
  },
  data () {
    return {
      selectedText: '',
      showPop: false,
      map: null,
      geocoder: null,
      location: '',
      locationTitle: ''
    }
  },
  computed: {
    showText: function () {
      let rtn = ''
      if (this.selectedText) {
        rtn = this.selectedText
      } else if (this.selectedValue) {
        rtn = '经度:' + this.selectedValue.split(',')[0] + ',纬度:' + this.selectedValue.split(',')[1]
      }
      return rtn
    }
  },
  methods: {
    load (data) {
    },
    getText () {
      return this.selectedText
    },
    setValue (val) {
      this.selectedValue = val
      this.getPositionTitle()
    },
    getPositionTitle () {
      let self = this
      if (this.selectedValue) {
        let splitA = this.selectedValue.split(',')
        this.geocoder.getAddress(splitA, function (status, result) {
          if (status === 'complete' && result.regeocode) {
            var address = result.regeocode.formattedAddress
            self.selectedText = address
          }
        })
      } else {
        this.selectedText = ''
      }
    },
    isDataComponent () {
      return true
    },
    handleShowPopClose () {
      this.showPop = false
    },
    submitSelected () {
      this.selectedValue = this.location
      this.selectedText = this.locationTitle
      this.showPop = false
      this.onChange()
    },
    cancelSelected () {
      this.showPop = false
    },
    handleEmbeddedDesignEvent (event, sender, targetData) {
      this.$emit('onDesignEvent', event, sender, targetData)
    },
    initMap () {
      var _self = this
      // 高德地图API功能
      /* global AMap */
      /* global AMAP_ANIMATION_BOUNCE */
      _self.map = new AMap.Map('myMap', {
        resizeEnable: true,
        zoom: 16,
        zooms: [3, 20],
        expandZoomRange: true
      }) // 创建Map实例
      var point = ''
      if (_self.selectedValue) {
        let splitA = _self.selectedValue.split(',')
        point = new AMap.LngLat(splitA[0], splitA[1])
        let markers = new AMap.Marker({
          position: point,
          animation: 'AMAP_ANIMATION_BOUNCE'
        })
        _self.map.add(markers)
      } else {
        point = new AMap.LngLat(114.307274, 30.544488)
      }
      _self.map.setCenter(point) // 设置地图显示的中心点
      // 编辑状态时，为地图添加点击事件
      if (_self.myConfig.isEnable) {
        _self.map.on('click', function (e) {
          var pt = e.lnglat
          _self.location = pt.lng + ',' + pt.lat
          _self.geocoder.getAddress([pt.lng, pt.lat], function (status, result) {
            if (status === 'complete' && result.regeocode) {
              var address = result.regeocode.formattedAddress
              _self.locationTitle = address
            }
          })
          let position = new AMap.LngLat(pt.lng, pt.lat)
          _self.map.clearMap()
          let markers = new AMap.Marker({
            position: position,
            animation: 'AMAP_ANIMATION_BOUNCE'
          })
          _self.map.add(markers)
        })
      }
    },
    handleEdit () {
      this.showPop = true
      this.location = this.selectedValue
      this.locationTitle = this.selectedText
      this.$nextTick(() => {
        this.initMap()
      })
    }
  },
  watch: {
  }
}
</script>
<style lang="scss" scoped>
.span-show {
  display: flex;
  min-height: 30px!important;
  height: 30px;
  width: 100%;
  border: 1px solid #c0ccda;
  border-radius: 3px;
}
.span-show-disabled {
  display: flex;
  min-height: 30px!important;
  height: 30px;
  width: 100%;
  border: 1px solid #e4e7ed;
  color: #333 !important;
  border-radius: 3px;
  background-color: #f5f7fa;
}
.multi {
  height: 60px!important;
}
.div-text {
  margin: 0 5px 0 0;
  width: 100%;
  overflow-y: auto;
  font-size: 15px;
}
.div-text-single {
  margin: 0 5px 0 0;
  width: 100%;
  overflow-y: hidden;
  font-size: 15px;
}

.span-button {
  font-size: 15px;
  width: 50px;
  display: flex;
  justify-content: center;
  border-left: 1px solid #c0ccda;
  background-color: #f5f7fa;
  cursor: pointer;
}
.span-button i {
  top: 30%;
  position: relative;
}
.query-content {
  display: flex;
  padding: 10px 0 0 0;
  justify-content: center;
  .c2 {
    width: 100%;
  }
}
.query-label {
  float:left;
}
.query-input {
  float: right;
}
.pop {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    .el-dialog__body {
      max-height: 70vh;
      overflow-y: auto;
    }
  }
}
#myMap{
  width: 100%;
  height: 500px;
}
</style>
